/* ============================
   SERVICES PAGE — MAIN LAYOUT
   ============================ */

.serveInfo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto 2rem;
  background-color: #222;
  border-left: 5px outset var(--accent-gold);
  border-right: 5px inset var(--accent-gold);
  border-radius: 5px;
  box-shadow: 0 0 0 2px var(--accent-gold-20);
}

/* ============================
   SERVICE CARD
   ============================ */

.serve {
  background: var(--bg-card);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 0 0 3px var(--bg-secondary);
  height: 100%;
  transition: transform .3s ease, box-shadow .3s ease;
}

.serve h2 {
  text-align: center;
  color: var(--accent-gold);
  margin-bottom: 1rem;
}

.serve p {
  line-height: 1.8;
  text-align: center;
  margin-bottom: 1rem;
}

.serve ul {
  margin: 1rem 0;
  padding-left: 1.2rem;
}

.serve ul li {
  margin-bottom: .5rem;
  line-height: 1.6;
}

/* Hover effect (desktop only) */
@media (hover: hover) {
  .serve:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px var(--accent-gold-20);
  }
}

/* ============================
   CALL TO ACTION BUTTON
   ============================ */

.call2ActBtn {
  display: inline-block;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 6px;
  background-color: #ffcc00;
  color: #111;
  border: 2px solid black;
  transition: background-color 0.3s ease;
}

.call2ActBtn:hover {
  background-color: #e6b800;
  cursor: pointer;
}

/* ============================
   RESPONSIVENESS
   ============================ */

/* Tablet — 2 columns */
@media (max-width: 1024px) {
  .serveInfo {
    grid-template-columns: repeat(2, 1fr);
    padding: 2rem 1.5rem;
  }
}

/* Mobile — 1 column */
@media (max-width: 768px) {
  .serveInfo {
    grid-template-columns: 1fr;
    padding: 1.5rem 1rem;
    gap: 1.5rem;
  }

  .serve {
    padding: 1.5rem;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .serveInfo {
    padding: 1rem .75rem;
  }

  .serve h2 {
    font-size: 1.4rem;
  }

  .serve p,
  .serve ul li {
    font-size: .95rem;
  }
}